//主文件，对wxChat的用法做示例

<template>
  <div>
      <div v-if="userInfo&&objInfo">
        <wxChat
        :showShade="false"
        :contactNickname="objInfo.username"
        :getUpperData="getUpperData"
        :getUnderData="getUnderData"
        :ownerAvatarUrl="userInfo.userUuid"
        :userId="userInfo.userId"
        :contactAvatarUrl="objInfo.userUuid"
        :objId="objInfo.userId"
        :width="width"
        ref="child"
      ></wxChat>
      </div>
    <div class="mask" v-if="detailsMask" @click="close">
      <div class="details_warp"  v-if="userInfo&&objInfo" @click.stop="kong">
        <img src="../assets/ic_close.png" class="close" alt @click="close" />
        <div  class="details_head">
          <img :src="objInfo.userUuid" alt />
        </div>
        <div class="details_name">{{objInfo.username}}</div>
        <div class="details_mes" v-if="!isReport">
          <div>年龄: {{objInfo.age}}</div>
          <div style="margin:0 23px;color:#E1D4D7">|</div>
          <div>身高: {{objInfo.height}}</div>
        </div>
        <div
          class="reportBtn"
          v-if="!isReport&&isFriend==1"
          style="background:#E83263;color:#fff;margin-bottom:20px;"
          @click="addFriend()"
        >添加好友</div>
        <div style="background:#fff;  padding-bottom: 16px;" v-if="isReport">
          <div class="matching_wrap">
            <div
              class="matching_item"
              @click="changeMatching(index)"
              v-for="(item,index) in userReportTypeList"
              :key="index"
            >
              <img src="../assets/ic_sex_default.png" alt v-if="matchIndex!=index" />
              <img src="../assets/ic_sexEd.png" alt v-else />
              <div>{{item.reportType}}</div>
            </div>
          </div>
        </div>
        <textarea name placeholder="请输入举报内容" id v-model="textareaMessage" v-if="isReport"></textarea>
        <div class="reportBtn" @click="reportBtn">举报</div>
      </div>
    </div>
    <!-- 重新匹配 -->
    <div class="back" @click="backPage" v-if="back">重新匹配</div>
    <!-- 添加好友 mask -->
    <div class="mask" v-if="addMask" @click="close">
      <div class="details_warp" @click.stop="kong">
        <img src="../assets/ic_close.png" class="close" alt @click="close" />
        <div class="details_head" style="width:147px;height:98px;">
          <img style="width:147px;height:98px;" src="../assets/ic_addMessage.png" alt />
        </div>
        <div class="details_name" style="font-size:17px;">添加好友</div>
        <div class="add_ex">添加好友收取 200Q豆 确认要添加吗？</div>
        <div class="add_ex">当前Q豆数量：{{userInfo.userGoldBalance}}</div>
        <div
          class="reportBtn"
          style="background:#E83263;color:#fff;margin-bottom:20px;"
          @click="addFriend"
          v-if="isFriend==0"
        >添加好友</div>
        <div class="reportBtn" @click="goPay">去充值</div>
      </div>
    </div>
  </div>
</template>
<script>
import wxChat from "../components/wxChat.vue";
import * as API from "@/http/common/api";
import util from "../utils/utils";
import tim from "../utils/tim";
// const SDK = require("../sdk/NIM_Web_SDK_v7.0.3");
export default {
  name: "talking",
  data() {
    return {
      userInfo:null,
      objInfo: {
        username:'好友'
      }, //对方info
      addMask: false,
      isReport: false, //是否是举报的状态
      detailsMask: false,
      userReportTypeList: [], //举报类型
      matchIndex: 0,
      upperTimes: 0,
      underTimes: 0,
      upperId: 0,
      underId: 6,
      back:false,//是否 重新匹配
      token: null,
      textareaMessage:null,
      width: window.screen.width,
      ownerAvatarUrl: "https://profile.csdnimg.cn/5/D/8/3_weixin_33910434",
      contactAvatarUrl: "https://profile.csdnimg.cn/5/D/8/3_weixin_33910434",
    };
  },
  components: { wxChat },
  created() {
    this.initWidth();
   
  },

  methods: {

    // 添加好友
    addFriend() {
      if(this.userInfo.userGoldBalance<200){
        this.$vux.toast.show({ text: "余额不足请充值", type: "text" });
        return
      }
      this.$http(API.Add, {
        type: "POST",
        params: {
          friend: 0,
          friendBlackIdent: 0,
          friendId: this.objInfo.userId,
          hide: 0,
          userId: this.userInfo.userId,
          userfriendId: 0
        }
      })
        .then(res => {
          if (res.data.code == 0) {
            this.$vux.toast.show({ text: "添加成功", type: "text" });
            this.isFriend==1
            this.$refs.child._isFriend()
            this.close();
          } else {
          }
        })
    },

    //举报按钮
    reportBtn() {
      if (this.isReport) {
        //是举报的状态
        this.userInformer();
      } else {
        //不是举报的状态 变成举报的状态
        this.isReport = true;
      }
    },
    changeMatching(e) {
      this.matchIndex = e;
    },
    // close
    close() {
      this.detailsMask = false;
      this.addMask = false;
      this.isReport = false;
    },
    //查看详情
    openDetails() {
      this.detailsMask = true;
    },
    //查看详情
    openAddFriend() {
      this.addMask = true;
    },
    initWidth() {
      var ua = navigator.userAgent;
      var ipad = ua.match(/(iPad).*OS\s([\d_]+)/),
        isIphone = !ipad && ua.match(/(iPhone\sOS)\s([\d_]+)/),
        isAndroid = ua.match(/(Android)\s+([\d.]+)/),
        isMobile = isIphone || isAndroid;
      //非移动端设置400px宽度，移动端是100%
      if (!isMobile) {
        this.width = 400;
      }
    },

    //向上滚动加载数据
    getUpperData() {
      var me = this;

      // 这里为模拟异步加载数据
      // 实际上你可能要这么写:
      // return axios.get('xxx').then(function(result){
      //     return result;  //result的格式需要类似下面resolve里面的数组
      // })
      return new Promise(function(resolve) {
        setTimeout(function() {
          //模拟加载完毕
          if (me.upperTimes > 3) {
            return resolve([]);
          }

          //加载数据
          resolve([
            {
              direction: 2,
              id: me.upperId - 1,
              type: 1,
              content: "向上滚动加载第 " + me.upperTimes + " 条！",
              ctime: new Date().toLocaleString()
            },
            {
              direction: 1,
              id: me.upperId - 2,
              type: 1,
              content: "向上滚动加载第 " + me.upperTimes + " 条！",
              ctime: new Date().toLocaleString()
            }
          ]);
        }, 1000);
        me.upperId = me.upperId + 2;
        me.upperTimes++;
      });
    },

    getUnderData() {
      var me = this;

      //意义同getUpperData()
      return new Promise(function(resolve) {
        setTimeout(function() {
          //模拟加载完毕
          if (me.underTimes > 3) {
            //超过页码 return
            return resolve([]);
          }

          //加载数据
          resolve([
            {
              direction: 1,
              id: me.underId + 1,
              type: 1,
              content: "向下滚动加载第 " + me.underTimes + " 条！",
              ctime: new Date().toLocaleString()
            },
            {
              direction: 2,
              id: me.underId + 2,
              type: 1,
              content: "向下滚动加载第 " + me.underTimes + " 条！",
              ctime: new Date().toLocaleString()
            }
          ]);
        }, 1000);

        me.underId = me.underId + 2;
        me.underTimes++;
      });
    },
    //去充值
    goPay(){
      this.$router.push({ name: "TopUp", params: {} });
    },
    kong() {},
    // 举报类型
    userReportType() {
      this.$http(API.userReportType, {
        type: "GET",
        params: {}
      })
        .then(res => {
          if (res.data.code == 0) {
            this.userReportTypeList = res.data.Message;
          }
        })
        .catch(err => {
          this.$vux.loading.hide();
        });
    },
    // 举报
    userInformer() {
      this.$http(API.userInformer, {
        type: "POST",
        params: {
          informerId: this.userInfo.userId,
          byinformerId: this.objInfo.userId,
          informerCause:  this.textareaMessage,
          informerType:this.matchIndex
        }
      })
        .then(res => {
          if (res.data.code == 0) {
            this.$vux.toast.show({ text: "举报成功", type: "text" });
            this.close();
            this.textareaMessage = ""; //清空举报内容
          } else {
            this.$vux.toast.show({ text: "举报失败", type: "text" });
          }
        })
        .catch(err => {
          this.$vux.loading.hide();
        });
    },
    //是否是好友
    findFriendMark() {
      this.$http(API.findFriendMark, {
        type: "GET",
        params: {
          userid: this.userInfo.userId,
          friendid: this.objInfo.userId
        }
      })
        .then(res => {
          if (res.data.code == 0) {
            this.isFriend = res.data.Message;
          } else {
          }
        })
        .catch(err => {
          this.$vux.loading.hide();
        });
    },
    backPage(){
      this.$router.go(-1);
    }
  },
  mounted() {
    this.userInfo = JSON.parse(this.$localStorage.get("userInfo"));
    this.token = this.$localStorage.get("token");
    this.objInfo = this.$route.params.message;
    this.back = this.$route.params.back?this.$route.params.back:false
    console.log("用户信息====", this.userInfo);
    console.log("对方信息====", this.objInfo);
    this.userReportType();
    this.findFriendMark();
  }
};
</script>
<style scoped>
.mask {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 999;
  left: 0;
  box-sizing: border-box;
  padding-bottom: 111px;
  top: 0;
}
.matching_wrap {
  display: flex;
  background: #fff;
  justify-content: space-around;
}
.matching_item {
  display: flex;
  justify-content: center;
  font-size: 13px;
  margin-top: 7px;
  width: 76px;
}
.matching_item > img {
  width: 14px;
  height: 14px;
  margin: 3px 5px 0 0;
}
.details_warp {
  width: 280px;
  height: 340px;
  margin-top: 111px;
  border-radius: 5px;
  background: #fff;
  margin: 0 auto;
  padding: 20px 20px 16.5px 20px;
  box-sizing: border-box;
  margin-top: 111px;
  position: relative;
}
.details_head {
  width: 75px;
  height: 75x;
  border-radius: 4px;
  margin: 0 auto;
  margin-bottom: 11px;
}
.details_name {
  font-size: 17px;
  text-align: center;
}
.details_mes {
  display: flex;
  justify-content: center;
  font-size: 13px;
  margin: 10px 0 20px 0;
}
textarea {
  width: 240px;
  height: 101px;
  border: #eee3e6 solid 1px;
  padding: 6px;
  box-sizing: border-box;
  border-radius: 5px;
  margin: 0 auto;
}
.reportBtn {
  width: 240px;
  height: 101px;
  border-radius: 5px;
  margin: 0 auto;
  border: #e83263 solid 1px;
  text-align: center;
  color: #e83263;
  line-height: 40px;
  height: 40px;
  font-size: 15px;
  margin-top: 9px;
}
.close {
  position: absolute;
  width: 16.5px;
  height: 16.5px;
  right: 10px;
  top: 10px;
}
.add_ex {
  font-size: 13px;
  padding-left: 10px;
}
.details_head > img {
  width: 75px;
  height: 75px;
  border-radius: 50%;
}
.back{
  position: fixed;
  right: -15px;
  bottom: 80px;
  width: 100px;
  height: 31px;
  color: #fff;
  background: #e83263;
  border-radius: 31px;
  z-index: 999;
  font-size: 13px;
  line-height: 31px;
  padding-left: 17px;
  box-sizing: border-box;
  opacity: 0.8;

  box-shadow: #e83263 0px 0px 6px
}
</style>
